<template>
  <el-dialog :visible="showDialog" title="弹层标题" @close="closure" @open="edits">
    <el-form ref="formDater" label-width="100px" :data="formData" :model="formData">
      <el-form-item label="权限名称">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="code">
        <el-input v-model="formData.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="formData.description" />
      </el-form-item>
      <el-form-item label="权限启用">
        <el-switch
          v-model="formData.enVisible"
          active-text="启用"
          inactive-text="不启用"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align: right;">
        <el-button @click="closure">取消</el-button>
        <el-button type="primary" @click="addType">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionDetail, updatePermission } from '@/api/permission'
// 导入局部组件必须在scrip里面导入,在App里面导入
export default {
// 组件名称
  name: 'ElAutorite',
  // 接收局部注册的组件
  components: {},
  // 组件参数接收来自父组件的数据
  props: {
    showDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    pid: { // pid
      type: String,
      default: () => {
        return '0'
      }
    },
    edit: { // 编辑的id
      type: String,
      default: () => {
        return ''
      }
    },
    requestPermissions: { // 获取所有数据的方法
      type: Function,
      default: () => {
        return Function
      }
    }
  },
  // 组件数据
  data () {
    return {
      formData: {
        enVisible: '0', // 开启
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        type: 1, // 类型
        pid: 0 // 添加到哪个节点下
      }
    }
  },

  methods: {
    // 关闭弹窗
    closure () {
      this.$refs.formDater.resetFields()
      this.formData = {
        enVisible: '0', // 开启
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        type: 1, // 类型
        pid: 0 // 添加到哪个节点下
      }
      this.$emit('closure')
    },
    // 增加
    async  addType () {
      if (this.pid === '0' && !this.formData._id) {
        // addPermission 上面的增加按钮
        await addPermission(this.formData)
      } else if (this.pid !== '0' && !this.formData._id) {
        // addPermission 下面的增加按钮
        this.formData.type = 2
        this.formData.pid = this.pid
        await addPermission(this.formData)
      }
      // 编辑
      if (this.formData._id) {
        console.log(this.formData)
        const res = await updatePermission(this.edit, this.formData)
        console.log(res)
      }
      //   重置为0
      this.$emit('pids', '0')
      this.formData = {
        enVisible: '0', // 开启
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        type: 1, // 类型
        pid: 0 // 添加到哪个节点下
      }
      this.$emit('closure')
      // 重新获取数据
      this.requestPermissions()
    },
    // 编辑
    async edits () {
      if (this.edit !== '') {
        console.log(this.edit)
        const res = await getPermissionDetail(this.edit)
        this.formData = res.data
        console.log(res.data)
      }
    }
  }
}
</script>
<style lang='less' scoped>

</style>
